<template>
    <view class="ganzhi-containter">
      <view class="ganzhi_item" style="background-color: #666666">
        <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">十神：</view>
        <text class="ganzhi_content" v-for="(item, index) in baziShishen" :key="index">
          <template v-if="index==2 && hasSex==false">-</template>
          <template v-else>
            {{ item }}
          </template>
        </text>
      </view>
      <view class="ganzhi_item" style="background-color: #999999">
        <view class="ganzhi_title">天干：</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in tiangan" :key="index">
          <view :style="fiveElementInfo(item).color">{{
                  item
                }}</view>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">地支：</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in dizhi" :key="index">
          <view :style="fiveElementInfo(item).color">{{
                  item
                }}</view>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #999999">
        <view class="ganzhi_title">藏干：</view>
        <view class="ganzhi_content ganzhi_content_canggan" v-for="(item, index) in canggan" :key="index">
          <view v-for="(e, i) in (item.split(','))" :key="i">{{ e }}({{ cangganShishen[index][i] }})</view>
        </view>
      </view>
<!--     <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">副星：</view>
        <view class="ganzhi_content ganzhi_content_cangganShishen" v-for="(item, index) in cangganShishen" :key="index">
          <view v-for="(e, i) in item" :key="i">{{ e }}</view>
        </view>
      </view> -->
<!--      <view class="ganzhi_item">
        <view class="ganzhi_title">星运</view>
        <view class="ganzhi_content" v-for="(item, index) in dishi" :key="index">{{ item }}</view>
      </view> -->
<!--      <view class="ganzhi_item">
        <view class="ganzhi_title">自坐</view>
        <view class="ganzhi_content" v-for="(item, index) in zizuo" :key="index">{{ item }}</view>
      </view> -->
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">纳音：</view>
        <view class="ganzhi_content" v-for="(item, index) in nayin" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item" style="background-color: #999999">
        <view class="ganzhi_title">空亡：</view>
        <view class="ganzhi_content" v-for="(item, index) in kongwang" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">神煞：</view>
        <view class="ganzhi_content ganzhi_content_shensha" v-for="(item, index) in shensha"
          :key="index">
          <view v-for="(e, i) in item" :key="i">{{ e }}</view>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #999999">
        <view class="ganzhi_title">天干留意：</view>
        <view class="ganzhi_liuyi">
          <template v-for="item in baziResult.tianGanAttention">
            <span>{{item}};</span>
          </template>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">地支留意：</view>
        <view class="ganzhi_liuyi">
          <template v-for="item in baziResult.diZhiAttention">
            <span>{{item}};</span>
          </template>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #999999">
        <view class="ganzhi_title">称骨重量：</view>
        <view class="ganzhi_liuyi">{{baziResult.weight}}</view>
      </view>
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title">称骨评语：</view>
        <view class="ganzhi_liuyi">
          <template v-if="hasSex==false">
            <view>男：{{ baziResult.weightDescription2 }}</view>
            <view>女：{{ baziResult.weightDescription }}</view>
          </template>
          <template v-else>
            {{ baziResult.weightDescription }}
          </template>
        </view>
      </view>
    </view>
</template>
<script>
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      },
      hasSex: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      result: {
        handler(newVal) {
          this.baziResult = newVal;
          this.init();
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        baziResult: this.result,
        shizhu: ["四柱：", "年柱", "月柱", "日柱", "时柱"],
        baziShishen: [],
        tiangan: [],
        dizhi: [],
        canggan: [],
        cangganShishen: [],
        dishi: [],
        zizuo: [],
        nayin: [],
        kongwang: [],
        shensha: []
      }
    },
    methods: {
      init() {
        this.$nextTick(() => {
          this.baziShishen = [this.baziResult.yearGanShiShen, this.baziResult.monthGanShiShen, this.baziResult
            .dayGanShiShen, this.baziResult.timeGanShiShen
          ];
          this.tiangan = [this.baziResult.yearGan, this.baziResult.monthGan, this.baziResult.dayGan, this.baziResult
            .timeGan
          ];
          this.dizhi = [this.baziResult.yearZhi, this.baziResult.monthZhi, this.baziResult.dayZhi, this.baziResult
            .timeZhi
          ];
          this.canggan = [this.baziResult.yearCangGan, this.baziResult.monthCangGan, this.baziResult.dayCangGan, this
            .baziResult.timeCangGan
          ];
          this.cangganShishen = [this.baziResult.yearZhiShiShen, this.baziResult.monthZhiShiShen, this.baziResult
            .dayZhiShiShen, this.baziResult.timeZhiShiShen
          ];
          this.dishi = [this.baziResult.yearDiShi, this.baziResult.monthDiShi, this.baziResult.dayDiShi, this
            .baziResult.timeDiShi
          ];
          this.zizuo = [this.baziResult.yearZiZuo, this.baziResult.monthZiZuo, this.baziResult.dayZiZuo, this
            .baziResult.timeZiZuo
          ];
          this.nayin = [this.baziResult.yearNaYin, this.baziResult.monthNaYin, this.baziResult.dayNaYin, this
            .baziResult.timeNaYin
          ];
          this.kongwang = [this.baziResult.yearXunKong, this.baziResult.monthXunKong, this.baziResult.dayXunKong, this
            .baziResult.timeXunKong
          ];
          this.shensha = [this.baziResult.yearShenSha, this.baziResult.monthShenSha, this.baziResult.dayShenSha, this
            .baziResult.timeShenSha
          ];
        })
      },
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getJiuLongGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ganzhi-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ganzhi_item {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0;
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
  }

  .ganzhi_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    line-height: 48rpx;
    width: 20%;
    box-sizing: border-box;
    white-space: nowrap;
    // flex-grow: 0;
    flex-shrink: 0;
  }
  .ganzhi_liuyi {
    font-size: 26rpx;
  }

  .ganzhi_content {
    display: flex;
    justify-content: center;
    font-size: 26rpx;
    line-height: 48rpx;
    width: 25%;
    box-sizing: border-box;
  }

  .ganzhi-important {
    font-size: 48rpx;
    align-items: center;
  }

  .element-icon {
    width: 36rpx;
    height: 36rpx;
  }

  .ganzhi_content_canggan {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    line-height: 44rpx;
  }
  .ganzhi_content_cangganShishen {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .ganzhi_content_shensha {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
</style>